<script>
import ChartResizeListener from '@/mixins/chart-resize-listener'
import GlobalFilterListener from '@/views/visual-screen/components/GlobalFilterListener.vue'
import { defaultNumber } from '@/utils'

export default {
  name: 'comprehensive-analysis-of-key-indicators',
  mixins: [ChartResizeListener, GlobalFilterListener],
  inject: ['colors'],
  data () {
    return {
      lines: [
        { name: '综合能源消费量', value: 1, unit: '吨标准煤' },
        { name: '工业总产值', value: 2, unit: '万元' },
        { name: '用电量', value: 3, unit: '千瓦时' },
        { name: '用煤量', value: 4, unit: '吨' },
      ],
      tag: 1,
      xData: [],
    }
  },
  computed: {
    districts () {
      return this.$store.getters['user/districts']
    },
    industryMapList () {
      return this.$store.state.industryMapList
    },
    chartOption () {
      const lines = this.lines
      const tag = this.tag
      const colors = this.colors
      const unitName = lines.find(v => v.value === tag)?.unit
      const xData = this.xData
      const rand = () => (Math.random() * 5000 + 5000).toFixed(2)
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          valueFormatter: value => `${defaultNumber(value)} ${unitName}`
        },
        grid: {
          bottom: '30px',
          top: '30px',
        },
        yAxis: {
          type: 'value',
          name: unitName,
          splitLine: {
            show: false
          },
        },
        textStyle: {
          color: '#2c528f'
        },
        xAxis: {
          type: 'category',
          axisLine: {
            lineStyle: {
              color: '#136cca'
            }
          },
          data: xData
        },
        series: [
          {
            name: lines.find(v => v.value === tag)?.name,
            type: 'line',
            smooth: true,
            lineStyle: {
              color: colors[tag + 1]
            },
            data: xData.map(() => rand())
          }
        ]
      }
    },
  },
  mounted () {
    setTimeout(() => {
      // TODO
      this.eventBusHandler({ type: '1' })
    }, 200)
  },
  methods: {
    eventBusHandler ({ type }) {
      this.xData = type === '1' ? this.districts.map(v => v.name) : this.industryMapList.map(v => v._name)
    },
    switchTag (tag) {
      this.tag = tag.value
    }
  }
}
</script>

<template>
  <div class="block-item">
    <div class="flex align-center item-head">
      <svg-icon class="item-icon" name="tradingdata"></svg-icon>
      <div class="head-title">
        <h3 class="primary-title">重点指标综合分析</h3>
        <p class="secondary-title">Comprehensive analysis of key indicators</p>
      </div>
    </div>
    <div class="item-body">
      <div class="padding text-center tags">
        <el-tag
          v-for="line in lines" size="mini" :key="line.value"
          :class="{'is-active': tag === line.value}"
          @click="switchTag(line)"
        >{{line.name}}</el-tag>
      </div>
      <div class="item-content" ref="container">
        <v-chart ref="chart" :option="chartOption" style="width: 100%; height: 140px;"></v-chart>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tags ::v-deep .el-tag {
  margin-right: 3px;
  background: #024a7f;
  border: 0;
  font-size: 12px;
  color: #0fade1;
  cursor: pointer;
  line-height: 22px;
  height: 22px;
  &.is-active {
    background: #51bb72;
    color: #42955b;
  }
}
</style>
